Ajax Fundamentals – Part 4

Index | Part 1 | Part 2 | Part 3 | Part 4 | Part 5

5. Development and Debugging Tools

5.1. Documenting JavaScript

JSDoc is an open source tool used to add inline documentation to JavaScript source files.   JSDoc is based on the javadoc tool.   Many of the javadoc characteristics have been included in JSDoc.   An example of using JSDoc can be found here.

5.2. Firefox Tools & Extensions

DOM Inspector is included in the Mozilla Suite and Firefox browser.   This tool provides a graphical user interface that enables a user to brows the document object model of any site.   One can view, update and insert DOM attributes dynamically.   In order to assist JavaScript developers, DOM Inspector can be switched to JavaScript Object mode.   This shows all the properties and methods available to a JavaScript for a particular mode.   DOM Inspector provides a JavaScript evaluation window that allows the user to execute JavaScript against selected nodes.   There is the option to use CSS Style Rules and Computed Style information.   This allows a user to examine the CSS attributes associated with different page elements.

Firefox JavaScript Console is a tool that logs JavaScript errors found on a page when the page is rendered.   The Firefox JavaScript Console gives ‘compiler-type’ messages.   It describes the error that occurred and the gives the line number.

Firebug integrates with Firefox and provides many development tools.   Firebug has a version of a DOM inspector that enables a developer to find elements.   CSS support allows settings to be altered and viewed.   Firebug allows one to monitor the network activity in order to determine how long it takes for different sections of a page to download.      A JavaScript Debugger allows one to debug and step through the JavaScript at runtime.

HTML Validator is a Mozilla extension that performs HTML validation within Firefox and Mozilla.   HTML Validator validates the HTML locally and does not use a remote third party.   The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing.   HTML Validator offers a set of tools to assist in validating and correcting HTML tags.

Checky is Firefox extension tool for validating HTML.   In addition to HTML, Checky can validate XHTML, CSS, RDF, RSS, XML and many more formats.   Checky sends the source to third-party cites to be validated.   The third-party cites may be free or commercial services.

Pederick’s Firefox Web Developer extension offers a large set of tools for a website developer.      Web Developer provides an extensive set of tools, from highlighting table cells to converting ‘GET’ requests to ‘POST’ requests.   This toolbar contains more than 80 tools and is an essential commodity.

5.3. JavaScript Syntax Checking

JSLint is an online tool that evaluates JavaScript code.   JSLint scans the JavaScript code and identifies syntax errors, structural problems and questionable coding-style conventions.

5.4. Compression and Obfuscation

MemTronic’s FREEWARE HTML/JavaScript Cruncher-Compressor  is a freeware tool that can perform both compression and obfuscation.   The MemTronic’s website provides the following information.   The tool can Crunch, Compress and Obfuscate.   Crunching removes all comments and whitespace.   Crunching has a bandwidth saving between 20%-50%.   Compressing will compress the script with a real compression-scheme, with auto decompression added to the file.   This results in bandwidth savings between 40% – 90%.   The obfuscator has not been released at this stage.   Once complete this tool will encode the script into a format that humans can not easily read.   When using Compress, the file will undergo a level of obfuscation.

Index | Part 1 | Part 2 | Part 3 | Part 4 | Part 5